<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>进度条</title>
		<style>
			div {
				width: 500px;
				height: 50px;
				background: #d98832;
				border: 1px solid #ccc;
				border-radius: 5px;
				margin: 200px auto;
				position: relative;
			}
			span{
				display: block;
				width: 0px;
				height: 48px;
				background: #00f;
				border: 1px solid #ccc;
				border-radius: 5px;
			}
			input{
				border: 0;
				width: 100px;
				text-align: center;
				height: 48px;
				font: 20px/50px "";
				position: absolute;
				top: 0px;
				left: 200px;
				background: rgba(255,255,255,.0);
			}
		</style>
	</head>
	<body>
		<div>
			<span></span>
			<input type="text" value="0" />
		</div>
	</body>
</html>
<script>
	var num=0;
	var timer=setInterval(function(){
		var p=parseInt(Math.random()*5)
		num+=p;
		var oPan=document.querySelector('span');
		oPan.style.width=num+'px';
		var oIpt=document.querySelector('input');
		oIpt.value=parseInt((num/500)*100)+"%";
		if (num>=500) {
			clearInterval(timer);
		}
	},50)
</script>